<template>
  <div class="mvList">
    <img
      v-for="(img, index) in imageList"
      v-lazy="img.cover"
      :key="index"
      @click="toPlayMv(img.id)"
    />

    <div class="mvPlay" v-if="isShow">
      <video autoplay="autoplay" controls :src="mvSrc"></video>
      <van-icon name="close" @click="offPlay" />
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      imageList: [],
      mvSrc: "",
      isShow: false,
    };
  },
  created() {
    axios.get("http://localhost:3000/mv/first").then((res) => {
      this.imageList = res.data.data;
    });
  },
  methods: {
    toPlayMv(id) {
      this.isShow = true;
      axios.get("http://localhost:3000/mv/url?id=" + id).then((res) => {
        this.mvSrc = res.data.data.url;
      });
    },
    offPlay() {
      this.isShow = false;
    },
  },
};
</script>

<style>
.mvList {
  width: 100%;
  padding-top: 3vw;
  background-image: linear-gradient(135deg, #feb692 10%, #ea5455 100%);
}
.mvList img {
  width: 90%;
  margin: 0 5%;
  border-radius: 10px;
}
.mvList .mvPlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.mvList .mvPlay video {
  width: 90%;
}
.mvList .mvPlay .van-icon {
  font-size: 12vw;
  color: #fff;
  margin-top: 20px;
}
</style>
